<template>
    <div class="tree">
        <TreeItem
            v-for="(item,index) in items"
            :key="index"
            :item="item"
            @on-toggle-expand="item=>$emit('on-toggle-expand',item)"
            @on-toggle-checked="item=>$emit('on-toggle-checked',item)"
            @on-context-menu="options => $emit('on-context-menu', options)"
            @on-double-click="options => $emit('on-double-click', options)"
        ></TreeItem>
    </div>
</template>
<script>
import TreeItem from './TreeItem'
export default {
	components: {
		TreeItem
	},
	props: {
		tree: {
			type: Array,
			default() {
				return []
			}
		}
	},
	data() {
		return {
			items: [{ name: '成功' }]
		}
	},
	mounted() {
		this.updateData()
	},
	watch: {
		tree: {
			handler() {
				this.updateData()
			},
			deep: true
		}
	},
	methods: {
		updateData() {
			this.items.splice(0)
			this.flattenJsonObject(this.tree, undefined, 0, this.items)
		},
		flattenJsonObject(jsonObjectArray, parent, level, items) {
			jsonObjectArray.forEach(jsonObject => {
				jsonObject.level = level
				jsonObject.parent = parent
				items.push(jsonObject)

				if (jsonObject.expand && jsonObject.children) {
					this.flattenJsonObject(jsonObject.children, jsonObject, level + 1, items)
				}
			})
		}
	}
}
</script>
<style scoped>
.tree {
	width: 100%;
	height: 100%;
	overflow: auto;
}
</style>


